// 屏幕适配 mixin 函数

// * 默认缩放值
const scale = {
    width: "1",
    height: "1",
  };
  
  // * 设计稿尺寸（px）
  const baseWidth = 1920;
  const baseHeight = 1080;
  
  // * 需保持的比例（默认1.77778）
  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
  
  export default {
    data() {
      return {
        // * 定时函数
        drawTiming: null,
      };
    },
    mounted() {
      this.calcRate();
      window.addEventListener("resize", this.resize);
    },
    unMounted() {
      window.removeEventListener("resize", this.resize);
    },
    methods: {
      // calcRate () {
      //   const appRef = this.$refs["appRef"]
      //   console.log(appRef)
      //   if (!appRef) return
      //   // 当前宽高比
      //   const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
      //   if (appRef) {
      //     if (currentRate > baseProportion) {
      //       // 表示更宽
      //       scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
      //       scale.height = (window.innerHeight / baseHeight).toFixed(5)
      //       appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      //     } else {
      //       // 表示更高
      //       scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
      //       scale.width = (window.innerWidth / baseWidth).toFixed(5)
      //       appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      //     }
      //   }
      // },
      calcRate() {
        const appRef = this.$refs["appRef"];
        console.log("appRef", appRef);
        if (!appRef) return;
        // 当前宽高比
        const currentRate = parseFloat((document.body.clientWidth / document.body.clientHeight).toFixed(5));
        const NewWidth = 1920;
        const NewHeight = 1080;
        const scaleX = parseFloat((document.body.clientWidth / NewWidth).toFixed(5));
        const scaleY = parseFloat((document.body.clientHeight / NewHeight).toFixed(5));
        if (appRef) {
          if (currentRate > baseProportion) {
            // 表示更宽
            scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5);
            scale.height = (window.innerHeight / baseHeight).toFixed(5);
            appRef.style.transform = `scale(${scaleX}, ${scaleY}) translate(-50%, -50%)`;
            appRef.style.overflow = "hidden";
            document.getElementsByTagName("body")[0].className = "hidOverflow";
          } else {
            // 表示更高
            scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5);
            scale.width = (window.innerWidth / baseWidth).toFixed(5);
            appRef.style.transform = `scale(${scaleX}, ${scaleY}) translate(-50%, -50%)`;
            appRef.style.overflow = "hidden";
          }
        }
      },
      resize() {
        clearTimeout(this.drawTiming);
        this.drawTiming = setTimeout(() => {
          this.calcRate();
        }, 200);
      },
    },
  };
  